<template>
  <div class="feedback-add-page">
    <el-card shadow="always">
      <div slot="header" class="clearfix">
        <line-header :title="title"></line-header>
      </div>
      <div class="page-card-body">
        <div class="page-header-box" v-if="!isAdd&&formData.replay!=''">
          <span>反馈结果:</span>
          <span class="feed-status-box">{{ formData.replay }}</span>
        </div>
        <div class="page-form-box">
          <el-form
            ref="form"
            :model="formData"
            :rules="rules"
            label-width="90px"
          >
            <el-form-item label="标题:" prop="title">
              <el-input
                v-model="formData.title"
                placeholder="请输入问题反馈标题"
                :disabled="!isAdd"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系方式:" prop="contact">
              <el-input
                v-model="formData.contact"
                placeholder="请输入联系电话"
                :disabled="!isAdd"
              ></el-input>
            </el-form-item>
            <el-form-item label="内容:" prop="content">
              <el-input
                type="textarea"
                v-model="formData.content"
                :autosize="{ minRows: 6, maxRows: 12 }"
                placeholder="请输入问题反馈内容"
                :disabled="!isAdd"
              ></el-input>
            </el-form-item>
            <el-form-item label="反馈内容:" prop="content" v-if="(userInfo.role==5||userInfo.role==1)&&formData.result==1" required>
              <el-input
                type="textarea"
                v-model="formData.replay1"
                :autosize="{ minRows: 6, maxRows: 12 }"
                placeholder="请输入反馈内容"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="page-bottom-box">
          <el-button type="primary" v-if="isAdd" @click="hkStartSubmit">
            提交
          </el-button>
          <template v-else>
            <el-button type="primary"  @click="hkOpenAdd" v-if="userInfo.role==2">
              新建反馈
            </el-button>
            <el-button type="primary" :disabled="formData.result==3" @click="sendFK" v-if="userInfo.role==5||userInfo.role==1">
              提交反馈
            </el-button>
          </template>

          <el-button @click="hkClickBack">{{
            isAdd ? "取消" : "返回"
          }}</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import lineHeader from "@/components/line-header/index";
import {
  isNull,
  hkShowLoading,
  hkHidLoading,
  hkShowSuccessText,
  hkShowErrorText
} from "@/utils/tools";
import { hkNewFeedBack,hkFeedbackReplay } from "@/api/notice";
import {mapGetters} from "vuex"

export default {
  components: { lineHeader },
  props: {},
  data() {
    return {
      isAdd: true,
      title: "新建反馈",
      formData: {
        title: "",
        contact: "",
        content: "",
        replay1:"",
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入问题反馈标题",
            trigger: ["blur", "change"]
          }
        ],
        contact: [
          {
            required: true,
            message: "请输入联系电话",
            trigger: ["blur", "change"]
          }
        ],
        content: [
          {
            required: true,
            message: "请输入问题反馈内容",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    // 返回
    hkClickBack() {
      this.$router.back();
    },
    // 提交
    hkStartSubmit() {
      this.$refs.form.validate(validate => {
        if (validate) {
          hkShowLoading("新建中...");
          let { title,contact,content} = this.formData;
          hkNewFeedBack({ title,contact,content})
            .then(res => {
              hkHidLoading();
              hkShowSuccessText("新建成功");
              setTimeout(() => {
                // this.hkClickBack();
                this.$router.push({path:"/notice/feedback"})
              }, 1500);
            })
            .catch(err => {
              hkHidLoading();
              hkShowErrorText(err.message);
            });
        } else {
        }
      });
    },
    // 新建
    hkOpenAdd() {
      this.$router.push("/notice/feedback/add");
    },
    sendFK() {
      if(this.formData.replay1.length>0){
        let {id} = this.formData;
        let replay = this.formData.replay1;
        hkShowLoading("提交中...");

        hkFeedbackReplay({id,replay})
          .then(res => {
            hkHidLoading();
            hkShowSuccessText("提交成功");
            setTimeout(() => {
              this.hkClickBack();
            }, 1500);
          })
          .catch(err => {
            hkHidLoading();
            hkShowErrorText(err.message);
          });
      }

      // this.$router.push("/notice/feedback/add");
    }
  },
  created() {
    let meta = this.$route.meta;
    this.title = meta.title;
    let query = this.$route.query;
    if (isNull(query) && isNull(query.info)) {
      return;
    }
    this.isAdd = isNull(query.info);
    this.formData = JSON.parse(decodeURIComponent(query.info));

  },
  mounted() {},
  beforeDestroy() {}
};
</script>
<style lang="scss" scoped>
.page-card-body {
  width: 815px;
  margin: 0 auto;
}
.page-header-box {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 51px;
  height: 51px;
  background: #d5d8da23;
  padding-left: 30px;
  border-radius: 10px;
  .feed-status-box {
    padding-left: 10px;
    color: #ff1f34;
  }
}
.page-form-box {
  margin: 30px 50px;
}
.page-bottom-box {
  text-align: center;
  margin: 50px;
}
</style>
